<template>
	<view style="padding: 15px;color: #fff;">
		<view style="margin-top: 20px;"></view>
		<view class="center" style="font-size: 13px; color: #bdbdbd;">INVITE FRIENDS</view>
		<view class="center" style="font-size: 26px;text-align: center;margin-top: 15px;">
			Refer friends and earn extra points
		</view>
		<view style="display: flex;align-items:center;margin-top: 50px;justify-content: center;" >
			<view>+ </view>
			<image style="margin-left: 8px; width: 20px;height: 20px;" src="../../../../static/img/Group 1.png"></image>
			<text style="font-size: 14px;color: #C1E3FF;font-weight: bold; margin-left: 8px;">1,000</text>
			<text style="font-size: 10px;margin-left: 15px;">
				per successful referral
			</text>
		</view>
		<view style="margin-top: 50px;"></view>
		<view style=" font-size: 16px; width: 85%; margin: 0 auto; text-align: center;">
			Receive % of your friends’ points & extra % from their referrals’ points
		</view>
		<view style="display: flex;align-items:center;margin-top: 40px;justify-content: center;" >
			<view>+ </view>
			<image style="margin-left: 8px; width: 20px;height: 20px;" src="../../../../static/img/Group 1.png"></image>
			<text style="font-size: 14px;color: #C1E3FF;font-weight: bold; margin-left: 8px;">5%</text>
			<text style="font-size: 10px;margin-left: 15px;">
				of your friends points
			</text>
		</view>
		<view style="margin-top: 50px;"></view>
		<view style="background: #546C7F33;border-radius: 10px;height: 116px;">
			<view style="padding: 15px;">
				<view style="font-size: 17px;">My Referrals</view>
				<view class="center" style="font-size: 20px; font-weight: bold; margin-top: 15px;">5</view>
			</view>
		</view>
		<view style="margin-top: 15px;"></view>
		<view style="background: #546C7F33;border-radius: 10px;height: 116px;">
			<view style="padding: 15px;">
				<view style="font-size: 17px;">Bonus Points</view>
				<view class="center" style="font-size: 20px; font-weight: bold; margin-top: 15px;">83,289</view>
			</view>
		</view>
		<view style="margin-top: 15px;"></view>
		<view @click="openHandel" style="background: #F6CB23;color: #000; font-weight: bold; border-radius: 10px;font-size: 17px; height: 54px;" class="center">
			Start Game & Earn Points
		</view>
		<!-- Invite Friends弹窗 start -->
		<uni-popup 
			width="100%"
			ref="popup"
			 background-color="#1B2025"
			 bottom
			 type="bottom"
			 borderRadius="10px 10px 0 0"
			 @change="change">
			<view class="popup-content">
				 <view class="title">
				 	<view class="title_name">Invite Friends</view>
					<view class="title_icon"  @click="closeHandel">
						X
					</view>
				 </view>
				<view class="input_name">
					Share and get extra bonus points
				</view>
				<view class="input_box">
					<input class="uni-input" disabled focus v-model="changeValue" />
					<image @click="copy" src="../../../../static/img/copy-01.png" mode=""></image>
				</view>
				
				<button class="sbumit_bnt" size="default" type="default"
					hover-class="is-hover" @click="closeHandel">Send Link</button>
			</view>
		</uni-popup>
		<!-- Invite Friends弹窗 end -->
		
	</view>
</template>

<script>
	import {request} from '@/api/api.js'
	export default {
		data() {
			return {
				fridrensOpen:false,
				changeValue:"https://t.me/JumpAndSay_bot/Jump"
			}
		},
		mounted() {
			this.leaderboard()
		},
		methods: {
			copy(){
				uni.setClipboardData({
					data:this.changeValue,
					success: () => {
						uni.showToast({
							icon:'success',title:'copy success!'
						})
					}
				})
			},
			openHandel(){
				this.$refs.popup.open()
			},
			closeHandel(){
				this.$refs.popup.close()
			},
			 
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content{
		width: calc(100% - 40px);
		overflow: auto;
		margin: 0 auto;
		.title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.title_name{
				height: 40px;
				line-height: 40px;
				padding: 10px 0;
				font-family: Inter;
				font-size: 26px;
				font-weight: 600;
				line-height: 40px;
				text-align: left;


			}
			.title_icon{
				width: 20px;
				height: 20px;
				margin: 20px 0;
				display: flex;
				justify-items: end;
				text-align: center;
			}
		}
		.input_name{
			width: 100%;
			font-family: Inter;
			font-size: 15px;
			font-weight: 500;
			line-height: 22px;
			letter-spacing: -0.4000000059604645px;
			text-align: left;
			margin-bottom: 20px;
		}
		
		.input_box{
			display: flex;
			justify-content: space-between;
			background-color:rgba(255, 255, 255, 0.16);
			border-radius: 5px;
			margin-bottom: 20px;
			image{
				width: 20px;
				height: 20px;
				background-repeat: no-repeat;
				background-size: cover;
				margin-right: 12px;
				margin-top: 15px;
			}
			.uni-input{
				width: calc(100% - 20px);
				height: 40px;
				border-radius: 5px;
				padding:5px 10px;
				
			}
		}
		
		.sbumit_bnt{
			color: #000;
			background-color:  rgba(246, 203, 35, 1);
			border-color: rgba(246, 203, 35, 1);
			margin-bottom: 50px;
			margin-top: 50px;
			font-family: Inter;
			font-size: 17px;
			font-weight: 600;
			text-align: center;

		}
	}

</style>
